<template>
    <div>
        <el-container>
            <el-main>
                <el-container class="parent-body">
                    <el-header class="content-header">
                        <div><i class="el-icon-s-fold"></i> 数据列表</div>
                        <div>
                            <el-button icon="el-icon-arrow-left" @click.native="returnButton">返回</el-button>
                            <el-button @click.native="add">添加</el-button>
                        </div>
                    </el-header>
                    <el-main class="info-main padding-style">
                        <el-table :data="tableData" height="100%" border style="width: 100%">
                            <el-table-column prop="number" label="编号" width="80"></el-table-column>
                            <el-table-column prop="categoryName" label="分类名称" width="80"></el-table-column>
                            <el-table-column prop="level" label="级别"></el-table-column>
                            <el-table-column label="商品数量">
                                <template slot-scope="scope"><a href="javascript:;" @click="goodList" >{{scope.row.num}}</a></template>
                            </el-table-column>
                            <el-table-column prop="numUnit" label="数量单位"> </el-table-column>
                            <el-table-column prop="" label="导航栏" width="100">
                                <template slot-scope="scope"><el-switch v-model="scope.row.navigation"></el-switch></template>
                            </el-table-column>
                            <el-table-column label="是否显示" width="130">
                                <template slot-scope="scope"><el-switch v-model="scope.row.isShow"></el-switch></template></el-table-column>
                            <el-table-column prop="sort" label="排序"> </el-table-column>
                            <el-table-column label="设置" width="100">
                                <template slot-scope="scope">
                                    <el-button  size="mini" @click="transferGoods(scope.$index, scope.row)">转移商品</el-button>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="160">
                                <template slot-scope="scope">
                                    <el-button  size="mini" @click="updateOne(scope.$index, scope.row)">编辑</el-button>
                                    <el-button  size="mini" @click="deleteOne(scope.$index, scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-main>
                    <el-footer class="info-foot">
                        <div class="paging-style">
                            <el-pagination
                                    background
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                    :current-page.sync="currentPage1"
                                    :page-size="pageSize"
                                    layout="total, prev, pager, next, jumper"
                                    :total="total">
                            </el-pagination>
                        </div>
                    </el-footer>
                </el-container>
            </el-main>
        </el-container>

        <el-dialog title="转移商品" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
            <el-form ref="goodTransferClassification" :model="goodTransferClassification" label-width="120px">
                <el-form-item label="原商品分类：">
                    <el-select v-model="goodTransferClassification.oldGood" placeholder="请选择商品分类">

                    </el-select>
                </el-form-item>
                <el-form-item label="目标商品分类：">
                    <el-select v-model="goodTransferClassification.newGood" placeholder="请选择商品分类">

                    </el-select>
                </el-form-item>
                <span class="dialog-footer" style="text-align: right;display: inline-block;width:100%;">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="onSubmit">开始转移</el-button>
        </span>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
 import  classifyApi  from "@/api/goods/classify";
    export default {
        
        data() {
            return {
                multipleSelection: [],
                pageSize:10,
                total:2,
                currentPage1:1,
                dialogVisible: false,
                goodTransferClassification:[{
                    oldGood:'',
                    newGood:''
                }],
                tableData: [{
                    number: '3000001',
                    categoryName:'内衣',
                    level:'3',
                    num:'100',
                    numUnit:'件',
                    navigation:true,
                    isShow:true,
                    sort: '1',
                },{
                    number: '3000001',
                    categoryName:'内衣',
                    level:'3',
                    num:'100',
                    numUnit:'件',
                    navigation:true,
                    isShow:true,
                    sort: '1',
                },]
            }
        },
        methods:{
            transferGoods(index, row) {
                this.dialogVisible = true;
            },
            updateOne(index, row) {
                this.$router.replace({ path: "/goods/classifyForm" });
            },
            deleteOne(index, row) {
                alert("执行删除"+index+","+row);
            },
            handleSizeChange(val) {
                alert(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                alert(`当前页: ${val}`);
            },
            add(){
                this.$router.replace({ path: "/goods/classifyForm" });
            },
            handleClose(done) {
                done();
            },
            goodList(){
                this.$router.replace({ path: "/goods/goodsList" });
            },
            returnButton(){
                this.$router.replace({ path: "/goods/twoClassify" });
            },
            onSubmit(){
                if(this.goodTransferClassification.oldGood == ""){
                    this.$message({
                        type: 'warning',
                        message: '请选择原商品分类！'
                    });
                    return;
                }
                if(this.goodTransferClassification.newGood == ""){
                    this.$message({
                        type: 'warning',
                        message: '请选择目标商品分类！'
                    });
                    return;
                }

                alert("正在提交中...")
            },
            // 原商品分类
            removeClass(categoryId){
                classifyApi.getCategoryName(categoryId).then((response) => 
                     {
                        console.log(response);
                        this.goodTransferClassification.oldGood=response.data.data.categoryName;
                     }
                     )
            },

//可供选择得分类aa
            ClassAll(){

            },
        },
        mounted(){
            
        }
    }
</script>
<style scoped>
    .common-home,.content-header{
        border-bottom:1px solid #E4E4E4;
        position: relative;
    }
    .common-home>div{
        display: inline-block;
        width:100px;
        height:50px;
        vertical-align: top;
        text-align: center;
        line-height: 50px;
        color:#666666;
    }
    .common-home>.refresh{
        position: absolute;
        right:10px;
    }
    .common-home>div>span{
        border:4px solid #0399FE;
        display: inline-block;
        width: 0px;
        height: 15px;
        vertical-align: middle;
        margin-right: 5px;
        background-color: #0399FE;
    }
    .parent-body{
        border:1px solid #E4E4E4;
    }
    .content-header{
        height:50px;
        line-height: 50px;
        background-color:#F3F3F3;
        color:#666666;
        position: relative;
        text-align: left;
    }
    .info-main{
        background-color:#fff;
    }

    .content-header>div{
        display: inline-block;
    }
    .content-header>div:last-of-type{
        position: absolute;
        right:10px;
    }
    .padding-style{
        padding:0 !important;
    }

    .info-foot{
        background-color:#FDFDFE;
        height:60px;
        line-height: 60px;
        position: relative;
    }
    .paging-style{
        position: absolute;
        right:10px;
        display: inline-block;
        top:15px;
    }
</style>